<template>
  <div class="view-container">
    <el-descriptions class="margin-top" title="活动详情" :column="3" border>
      <template slot="extra">
        <el-button
          v-if="activityInfo.auditStatus === 0"
          v-has-permission="'activity:audit'"
          type="success"
          size="small"
          @click="handleAuditPass"
        >
          审核成功
        </el-button>
        <el-button
          v-if="activityInfo.auditStatus === 0"
          v-has-permission="'activity:audit'"
          type="danger"
          size="small"
          @click="handleAuditFailure"
        >
          审核失败
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="onClickDownload"
        >下载报名名单
        </el-button>
      </template>
      <el-descriptions-item>
        <template slot="label"> 活动编码</template>
        {{ activityInfo.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动名称</template>
        {{ activityInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 发布人</template>
        {{ activityInfo.companyName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 主办单位</template>
        {{ activityInfo.organizer }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动类型</template>
        {{ activityTypeMap[activityInfo.activityType] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动范围</template>
        <div style="display: flex; flex-direction: row; flex-wrap: wrap">
          <el-tag
            v-for="item in activityInfo.activityScope"
            :key="item"
            style="margin: 2px"
          >
            {{ item | activityScopeFilter }}
          </el-tag>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动地点</template>
        {{ activityInfo.location }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动状态</template>
        <el-tag :type="activityInfo.status == 1 ? 'success' : 'danger'">
          {{ activityInfo.status | enableStatusFilter }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 审核状态</template>
        <el-tag :type="activityInfo.auditStatus == 10 ? 'success' : 'danger'">
          {{ activityInfo.auditStatus | activityAuditStatusFilter }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 审核备注</template>
        {{ activityInfo.auditReason }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 开启报名</template>
        <el-tag :type="activityInfo.openApply == 1 ? 'success' : 'danger'">
          {{ activityInfo.openApply | enableStatusFilter }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 报名人数</template>
        {{ activityInfo.applied }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 限制人数</template>
        {{ activityInfo.limitNum }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动时间</template>
        {{ activityInfo.startTime | formatDate }} ~
        {{ activityInfo.endTime | formatDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动主图</template>
        <el-image
          v-for="item in activityInfo.imageIdList"
          :key="item"
          style="width: 100px; height: 100px"
          :src="imageUrl + item"
          fit="fill"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 活动介绍</template>
        <div v-html="activityInfo.description" />
      </el-descriptions-item>
    </el-descriptions>

    <div>
      <div class="table-title">报名名单</div>
      <el-table border :data="activityApplyList" style="width: 100%">
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="userName" label="报名人" width="300" />
        <el-table-column prop="useMobile" label="联系电话" width="180" />
        <el-table-column prop="address" label="用户类型" width="180">
          <template v-slot="scope">
            <el-tag>
              {{ scope.row.userType | activityScopeFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="报名时间" width="180" />
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  adminActivityAuditFailure,
  adminActivityAuditPass,
  adminActivityView
} from '@/api/rest/activity'
import { dictConfigItemByDictKeyList } from '@/api/rest/dictconfig'
import { DICT_CONFIG_KEY_ACTIVITY_TYPE } from '@/utils/constant'

export default {
  name: 'ActivityView',
  data() {
    return {
      imageUrl: process.env.VUE_APP_BASE_API + '/api/admin/file/view/',

      activityInfo: {
        id: 0
      },
      activityApplyList: [],
      activityTypeList: [],
      activityTypeMap: {}
    }
  },
  onLoad() {},
  created() {
    this.getActivityTypeList()
    this.activityInfo.id = this.$route.query.id
    this.loadData()
  },
  methods: {
    loadData() {
      adminActivityView(this.activityInfo.id).then((response) => {
        if (response.success) {
          this.activityInfo = { ...response.data.activity }
          this.activityApplyList = [...response.data.activityApplyList]
        }
      })
    },
    getActivityTypeList() {
      dictConfigItemByDictKeyList(DICT_CONFIG_KEY_ACTIVITY_TYPE).then(
        (response) => {
          this.activityTypeList = []
          const map = {}
          response.data.forEach((item) => {
            this.activityTypeList.push({
              value: item.itemValue,
              name: item.itemName
            })
            map[item.itemValue] = item.itemName
          })
          this.activityTypeMap = map
        }
      )
    },
    handleAuditPass() {
      this.$confirm('确定审核通过吗?', '提示', {}).then(() => {
        adminActivityAuditPass({ id: this.activityInfo.id }).then(
          (response) => {
            if (response.success) {
              this.$message.success('审核通过')
              this.loadData()
            }
          }
        )
      })
    },
    handleAuditFailure() {
      this.$prompt('请输入审核失败原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '请输入审核失败原因'
      }).then(({ value }) => {
        adminActivityAuditFailure({
          id: this.activityInfo.id,
          reason: value
        }).then((response) => {
          if (response.success) {
            this.$message.success('审核失败')
            this.loadData()
          }
        })
      })
    },
    onClickDownload() {
      location.href =
        process.env.VUE_APP_BASE_API +
        '/api/admin/activity/importExcel?activityId=' +
        this.activityInfo.id
    }
  }
}
</script>

<style scoped lang="scss">
.view-container {
  margin: 16px;
}

.table-title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 20px;
}
</style>
